<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8">
      <el-col :span="24">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['companyContact:companyContact:add']"
          v-if="companyContactList.length === 0"
        >新增公司信息</el-button>
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate(companyContactList[0])"
          v-hasPermi="['companyContact:companyContact:edit']"
          v-if="companyContactList.length > 0"
        >修改信息</el-button>
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          @click="handleDelete(companyContactList[0])"-->
<!--          v-hasPermi="['companyContact:companyContact:remove']"-->
<!--          v-if="companyContactList.length > 0"-->
<!--        >删除信息</el-button>-->
      </el-col>
    </el-row>

    <div v-if="companyContactList.length === 0" class="empty-container">
      <el-empty description="暂无公司联系信息">
        <el-button type="primary" @click="handleAdd">添加公司信息</el-button>
      </el-empty>
    </div>

    <el-card v-else class="company-info-card">
      <div slot="header" class="clearfix">
        <span class="company-title">{{ companyContactList[0].companyNameZh }}</span>
        <div class="company-actions">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(companyContactList[0])"
            v-hasPermi="['companyContact:companyContact:edit']"
          >编辑</el-button>
<!--          <el-button-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(companyContactList[0])"-->
<!--            style="color: #f56c6c"-->
<!--            v-hasPermi="['companyContact:companyContact:remove']"-->
<!--          >删除</el-button>-->
        </div>
      </div>

      <div class="company-details">
        <!-- 公司基本信息 -->
        <div class="info-section">
          <h3><i class="el-icon-office-building"></i> 公司信息</h3>
          <div class="info-item">
            <label>中文名称:</label>
            <span>{{ companyContactList[0].companyNameZh }}</span>
          </div>
          <div class="info-item">
            <label>英文名称:</label>
            <span>{{ companyContactList[0].companyNameEn }}</span>
          </div>
          <div class="info-item">
            <label>德文名称:</label>
            <span>{{ companyContactList[0].companyNameDe }}</span>
          </div>
        </div>

        <!-- 地址信息 -->
        <div class="info-section">
          <h3><i class="el-icon-location-outline"></i> 地址信息</h3>
          <div class="info-item">
            <label>中文地址:</label>
            <span>{{ companyContactList[0].addressZh }}</span>
          </div>
          <div class="info-item">
            <label>英文地址:</label>
            <span>{{ companyContactList[0].addressEn }}</span>
          </div>
          <div class="info-item">
            <label>德文地址:</label>
            <span>{{ companyContactList[0].addressDe }}</span>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="info-section">
          <h3><i class="el-icon-phone-outline"></i> 联系方式</h3>
          <div class="info-item">
            <label>联系电话:</label>
            <span>{{ companyContactList[0].phone }}</span>
          </div>
          <div class="info-item">
            <label>传真号码:</label>
            <span>{{ companyContactList[0].fax }}</span>
          </div>
          <div class="info-item">
            <label>联系邮箱:</label>
            <span>{{ companyContactList[0].email }}</span>
          </div>
        </div>

        <!-- 地图信息 -->
        <div class="info-section">
          <h3><i class="el-icon-map-location"></i> 地图信息</h3>
          <div class="info-item">
            <span>{{ companyContactList[0].googleMap }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 添加或修改公司联系信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司名称(中文)" prop="companyNameZh">
              <el-input type="textarea" :rows="2" v-model="form.companyNameZh" placeholder="请输入公司名称(中文)" />
            </el-form-item>
            <el-form-item label="公司名称(英文)" prop="companyNameEn">
              <el-input type="textarea" :rows="2" v-model="form.companyNameEn" placeholder="请输入公司名称(英文)" />
            </el-form-item>
            <el-form-item label="公司名称(德文)" prop="companyNameDe">
              <el-input type="textarea" :rows="2" v-model="form.companyNameDe" placeholder="请输入公司名称(德文)" />
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="公司地址(德文)" prop="addressDe">
              <el-input v-model="form.addressDe" type="textarea" :rows="2" placeholder="请输入公司地址(德文)" />
            </el-form-item>
            <el-form-item label="公司地址(中文)" prop="addressZh">
              <el-input v-model="form.addressZh" type="textarea" :rows="2" placeholder="请输入公司地址(中文)" />
            </el-form-item>
            <el-form-item label="公司地址(英文)" prop="addressEn">
              <el-input v-model="form.addressEn" type="textarea" :rows="2" placeholder="请输入公司地址(英文)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="联系邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入联系邮箱" />
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="地图信息" prop="longitude">
              <el-input type="textarea" :rows="4" v-model="form.googleMap" placeholder="请输入地图信息" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { listCompanyContact, getCompanyContact, delCompanyContact, addCompanyContact, updateCompanyContact } from "@/api/companyContact/companyContact"

export default {
  name: "CompanyContact",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 公司联系信息数据
      companyContactList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示大地图
      mapDialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        companyNameZh: [
          { required: true, message: "公司名称(中文)不能为空", trigger: "blur" }
        ],
        companyNameEn: [
          { required: true, message: "公司名称(英文)不能为空", trigger: "blur" }
        ],
        companyNameDe: [
          { required: true, message: "公司名称(德文)不能为空", trigger: "blur" }
        ],
        addressZh: [
          { required: true, message: "公司地址(中文)不能为空", trigger: "blur" }
        ],
        addressEn: [
          { required: true, message: "公司地址(英文)不能为空", trigger: "blur" }
        ],
        addressDe: [
          { required: true, message: "公司地址(德文)不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        googleMap: [
          { required: true, message: "地图不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "联系邮箱不能为空", trigger: "blur" },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询公司联系信息 */
    getList() {
      this.loading = true
      listCompanyContact(this.queryParams).then(response => {
        this.companyContactList = response.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        companyNameZh: null,
        companyNameEn: null,
        companyNameDe: null,
        addressZh: null,
        addressEn: null,
        addressDe: null,
        phone: null,
        googleMap: null,
        email: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm("form")
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加公司联系信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || (this.companyContactList.length > 0 ? this.companyContactList[0].id : null)
      getCompanyContact(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改公司联系信息"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCompanyContact(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addCompanyContact(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || (this.companyContactList.length > 0 ? this.companyContactList[0].id : null)
      this.$modal.confirm('是否确认删除公司联系信息？').then(() => {
        return delCompanyContact(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 查看大地图 */
    showFullMap() {
      this.mapDialogVisible = true
    }
  }
}
</script>

<style scoped>
.company-info-card {
  margin-top: 20px;
}

.company-title {
  font-size: 18px;
  font-weight: bold;
}

.company-actions {
  float: right;
}

.company-details {
  display: grid;
  gap: 20px;
}

.info-section {
  padding: 15px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.info-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #409EFF;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
}

.info-item label {
  font-weight: bold;
  min-width: 80px;
  color: #666;
}

.info-item span {
  flex: 1;
}

.map-preview {
  margin-top: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.map-image {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
}

.map-image:hover {
  transform: scale(1.02);
}

.map-hint {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 5px;
  background: #f5f5f5;
}

.map-placeholder {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 4px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style>
